{% extends 'header.html' %}
{% block title %}
	发布博客
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/wangEditor.css' %}">
    <style>
        #editor—wrapper {
                border: 1px solid #ccc;
                z-index: 100; /* 按需定义 */
        }
        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }
        #editor-container {
            height: 300px;
        }

    </style>

{% endblock %}

{% block js %}
    <script src="{% static 'js/wangEditor.js' %}"></script>
    <script src="{% static 'js/wangEditor-index.js' %}"></script>
    <script>
    $('#pub').click(function (){
        $.ajax({
            url:'{% url 'blog:pub_blogAPI' %}',
            type:'post',
            dataType:'json',
            headers:{
                "X-CSRFToken": "{{ csrf_token }}"
            },
            data:{
                'title':$('#title').val(),
                'category':Number($('#class option:selected').val()),
                'content':$('#editor-container #w-e-textarea-1').html()
            },
            success:function (response) {
                if (response.code === 200) {
                    alert('发布成功')
                    //跳转到详细页面
                    window.location.href = response.blog_id
                } else {
                    alert('发布失败')
                }
            },
            error:function (){
                alert('客户端错误')
            }
        })
    })
    </script>
{% endblock %}

{% block main %}
	<h1 class="mb-3">发布博客</h1>
    <form action="" method="post">
        {% csrf_token %}
        <div class="mb-3">
            <label for="basic-url" class="form-label">标题</label>
            <input class="form-control my-2" id="title" name="article_title" type="text" aria-label="default input example">
        </div>
        <div class="mb-4">
            <label for="basic-url" class="form-label">分类</label>
            <select id="class" class="form-select" aria-label="Default select example">
              <option selected disabled>请选择一个分类</option>
                {% for category in categories %}
                	<option value="{{ category.id }}">{{ category.name}}</option>
                {% endfor %}
            </select>
        </div>
        <div class="mb-3">
            <label for="basic-url" class="form-label">内容</label>
            <div id="editor—wrapper">
              <div id="toolbar-container"></div><!-- 工具栏 -->
              <div id="editor-container"></div><!-- 编辑器 -->
            </div>
        </div>
        <div class="text-end me-2">
            <button class="btn btn-primary" id="pub">发布</button>
        </div>
    </form>
{% endblock %}